<template>
	<view class="container" :style="'height:'+screenHeight+'px!important;'">
		<view class="uni-nav">
			<image class="uni-nav-left-img" src="../../static/icon/back.png" @click="back()"></image>
			<label>备份助记词</label>
			<image class="uni-nav-right-img"></image>
		</view>
		<view class="mnemonic_hint">
			<text style="font-size: 26upx;color: #DAC6A2;">请您将抄下的助记词按顺序点击选择至下方，以确认您的备份助记词正确</text>
		</view>
		<view class="mnemonic_bg">
			<view class="mnemonic_bg_view" v-for="(item,index) in ensureMenmonicList" :key="index" @click="delMnemonic(item,index)">
				<text>{{item}}</text>
				<image src="../../static/icon/close_small.png"></image>
			</view>
		</view>
		<view class="mnemonic_select">
			<view v-for="(item,index) in mnemonicList" :key="index" @click="addMnemonic(item,index)">
				<text>{{item}}</text>
			</view>
		</view>
		<view class="ensure">
			<image src="../../static/icon/ensure.png" @click="navTo('complete_mnemonic')"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenHeight: '',
				mnemonicList: [],
				ensureMenmonicList:[]
			}
		},
		onLoad() {
			this.screenHeight = uni.getSystemInfoSync().windowHeight;
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			addMnemonic(item,index){
				this.ensureMenmonicList.push(item);
				this.mnemonicList.splice(index,1);
			},
			delMnemonic(item,index){
				this.ensureMenmonicList.splice(index,1);
				this.mnemonicList.unshift(item);
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		},
		mounted() {
			this.mnemonicList = ['own', 'wgzcb', 'wun', 'sdefg', 'laisf', 'sakd', 'tjsfgs', 'urhalhf', 'app', 'abuogf', 'euer',
				'wuekl'
			];
		},
	}
</script>

<style>
	.container {
		background-size: 100% 100%;
		background-image: url(../../static/icon/wallet_bg.png);
	}

	.mnemonic_hint {
		margin-top: 71upx;
		margin-left: 62upx;
		margin-right: 62upx;
	}

	.mnemonic_bg {
		margin-top: 48upx;
		border: 1upx solid #FDF2D0;
		border-radius: 20upx;
		height: 395upx;
		margin-right: 35upx;
		margin-left: 36upx;
		padding: 68upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
    .mnemonic_bg_view{
		width: 180upx;
		text-align: center;
		
	}
	.mnemonic_bg text {
		font-size: 28upx;
		color: white;
		width: 160upx;
	}

	.mnemonic_bg image {
		width: 22upx;
		height: 22upx;
		margin-left: 12upx;
	}
	.mnemonic_select{
		margin-top: 51upx;
		margin-left: 40upx;
		margin-right: 40upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.mnemonic_select view{
		border-radius: 5upx;
		background-color: #2F2D38;
		width: 145upx;
		height: 60upx;
		text-align: center;
		margin-top: 20upx;
	}
	.mnemonic_select text{
		color: #7B7984;
		font-size: 28upx;
	}
	.ensure{
		display: flex;
		justify-content: center;
		margin-top: 146upx;
	}
	.ensure image{
		width: 288upx;
		height: 82upx;
	}
	
</style>
